<template>
  <div>
    <Card>
      <P slot="title">基本信息</P>

      <i-form ref="form-inline" inline :rules="ruleInline" :model="formInline">
        <Row>
          <i-col span="12">
            <Form-item prop="bankname" style="width: 100%;">
              <i-input size="large" type="text" v-model="formInline.bankname" placeholder="输入银行名称">
                <span class="lable-name" slot="prepend">银行名称</span>
              </i-input>
            </Form-item>
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            <Form-item prop="bankname" style="width: 100%;">
              <i-input size="large" type="text" v-model="formInline.cardnumber" placeholder="输入银行卡号">
                <span class="lable-name" slot="prepend">银行卡号</span>
              </i-input>
            </Form-item>
          </i-col>
          <i-col span="11" offset="1">
            <Form-item prop="bankname" style="width: 100%;">
              <i-input size="large" type="text" v-model="formInline.username" placeholder="输入开户名">
                <span class="lable-name" slot="prepend">开户名</span>
              </i-input>
            </Form-item>
          </i-col>
        </Row>
        <Row>
          <i-col span="12">
            <Form-item prop="bankname" style="width: 100%;">
              <i-input size="large" type="text" v-model="formInline.setmoney" placeholder="0">
                <span class="lable-name" slot="prepend">设置金额</span>
              </i-input>
            </Form-item>
          </i-col>
        </Row>
        <div>
          <Form-item size="large">
            <Button @click="handleSubmit()" size="large" class="com-btm">
              保存
            </Button>
            <Button @click="toback()" size="large" class="com-btm">
              返回
            </Button>
          </Form-item>
        </div>
      </i-form>
    </Card>
  </div>
</template>

<script>
  export default {
    name: 'add_news_page',
    data() {
      return {
        formInline: {
          bankname: '',
          cardnumber: '',
          username: '',
          setmoney: ''
        },
        ruleInline: {
          bankname: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }],
          cardnumber: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ],
          username: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ],
          setmoney: [{
            required: true,
            message: '必须项不能为空',
            trigger: 'blur'
          }, ]

        }
      }
    },
    methods: {
      handleSubmit() {
        this.$refs['form-inline'].validate((valid) => {
          if (valid) {
            this.$Message.success('提交成功!');
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      toback() {
        this.$router.push({
          name: 'cash_manage_page'
        })
      }
    }
  }
</script>

<style>
  button {
    margin-left: 10px;
  }
 .lable-name{
    width: 150px;
    display: inline-block;
  }
  /* .ivu-form .ivu-form-item-label {
    text-align: center;
    background-color: #FBFBFB;
    border: 1px solid #ddd;
  }

  .ivu-form-inline .ivu-form-item {
    width: 100%;
  } */

  /* .ivu-input {
    border-radius: 0;
    height: 34px;
  } */
</style>
